<template>
  <PageWrapper title="">
    <XGrid 
    ref="xGrid"
    :stripe="true"
    :columns="columns"
    :query-params="formConditionData.data"
    :query-api="getTableData"
    @checked-count="checkedCount">
    <template #form>
      <vxe-form :data="formConditionData.data" title-colon collapse-status>
        <vxe-form-item title="接口">
          <template #default="{ data }">
            <vxe-input
            v-model="data.word" clearable
              prefix-icon="vxe-icon-search"
              placeholder="名称|接口|方法"/>
          </template>
        </vxe-form-item>
        <vxe-form-item align="center">
        <template #default>
            <vxe-button type="submit" status="default" icon="vxe-icon-search" @click="load" title="点击查询">查询</vxe-button>
            <a-popconfirm title="确定重置查询条件吗？" @confirm="reset">
                <vxe-button status="default" icon="vxe-icon-repeat">重置</vxe-button>
            </a-popconfirm>
        </template>
        </vxe-form-item>
      </vxe-form>
    </template>
    <template #topLeft2>
      <Divider type="vertical"/>
      <Popconfirm
        placement="bottom"
        title="提示: 选择是否记录日志?"
        ok-text="埋点"
        cancel-text="不埋点"
        :disabled="logOpt.show"
        @confirm="handlePolicyLog(true)"
        @cancel="handlePolicyLog(false)">
        <a :class="{disabled:logOpt.show}">{{logOpt.title}}</a>
      </Popconfirm>
    </template>
    </XGrid>
  </PageWrapper>
</template>
<script lang="ts" name="Policy" setup>
import { Divider, Popconfirm } from 'ant-design-vue';
import { reactive, ref, } from 'vue';
import { columns, } from './data';
import { getTableData, log } from '/@/api/admin/policy';
import { PageWrapper } from '/@/components/Page';
import { XGrid } from '/@/components/XGrid';

const xGrid = ref()
const formConditionData = reactive({data: {
  word: '',
}})

const load = () => {
  xGrid.value.reload()
}

const reset = () => {
  Object.assign(formConditionData, {data: {}});
  xGrid.value.reload(true)
}

const logOpt = reactive({
  show: true,
  title: '日志埋点 (0)',
})
const handlePolicyLog = (operation:boolean) => {
  let params = {
    operation: operation,
    idList: xGrid.value.getCheckedList(true).map(e => e.id),
  }
  log(params).then(() => {
    xGrid.value.reload()
  })
}
const checkedCount = (count:number) => {
  logOpt.show = !(count > 0)
  logOpt.title = `日志埋点 (${count})`
  //
  logOpt.show = true
}
</script>
<style scoped>
.disabled {
  pointer-events: none;
  opacity: .5;
  -moz-opacity: .5;
  -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
  filter: grayscale(100%);
}
</style>
